<template>
	<view class="container">
		<block v-if="isload">
			<view class="contentbox-top" :style="{ background: '' + t('color1') + '' }">
				<view class="member-info">
					<view class="member-avatar">
						<image :src="userinfo.headimg"></image>
					</view>
					<view class="title">
						<view>
							{{ userinfo.nickname }}
						</view>
						<view>ID:{{ userinfo.id }}</view>
						<view class="endtime" v-if="userinfo.levelendtime > 0">
							到期时间：{{ dateFormat(userinfo.levelendtime, 'Y年m月d日') }}</view>
					</view>
				</view>
			</view>
			<!--会员权益-->
			<view class="member-quanyi">
				<view class="mylevel-name">{{ userlevel.name }}</view>
				<view class="levelup-info" v-if="hasnext == 1">{{ nextlevel.up_content }}</view>
				<view class="levelup-heng"></view>
				<view class="member-level-two">
					<view>{{ userlevel.name }}</view>
					<view v-if="hasnext == 1">{{ nextlevel.name }}</view>
				</view>
				<view class="member_tip">
					<view class="shuxian"></view>会员权益
				</view>

				<view class="level-list">
					<view class="level-item">
						<view class="level-name">
							<image :src="static_url + '/static/img/vip.png'"></image>
							{{ userlevel.name }}
						</view>
						<view class="level-quanyilist">
							<parse :content="userlevel.explain" />
						</view>
					</view>

					<view class="level-item" v-if="hasnext == 1">
						<view class="level-name">
							<image :src="static_url + '/static/img/vip.png'"></image>
							{{ nextlevel.name }}
						</view>
						<view class="level-quanyilist">
							<parse :content="nextlevel.explain" />
						</view>
					</view>
				</view>

				<view class="level-btn" v-if="userlevel.isdefault == 1">
					<view class="upbtn" @tap="goto" data-url="/pagesExt/my/levelpay">开通会员</view>
				</view>
<!-- 				<view class="level-btn" v-else>
					<view class="upbtn" @tap.stop="showmemberqr" :data-member_qr="member_qr">查看会员码</view>
				</view> -->
			</view>
			
			<!--兑换会员卡-->
			<view class="search-keyword" v-if="userlevel.isdefault == 1 && 0">
				<view class="f1 flex-y-center search-input">
					<input v-model="cardno" placeholder="请输入卡号兑换" placeholder-style="font-size:24rpx;color:#101010"
						confirm-type="search" @confirm="membership"></input>
				</view>
				<view class="search-btn" @click="membership()">
					兑换
				</view>
			</view>

			<view class="buy-list">
				<view class="buy-item" @tap="goto" data-url="/pages/money/recharge">
					<image :src="static_url + '/static/img/yue.png'"></image>
					账户余额
				</view>
				<view class="buy-item" @tap="goto" data-url="/pagesExt/order/orderlist">
					<image :src="static_url + '/static/img/orderlog.png'"></image>
					消费记录
				</view>
			</view>

			<!--<view class="membercard-vip" v-if="cardinfo.id">
				<view class="tips-title"><image :src="vipimg"></image></view>
				<view class="tips-content">ID：{{cardinfo.coupon_no}}</view>
			</view>-->

			<view class="membercard-tips" v-if="userlevel.isdefault == 1">
				<view class="tips-title">会员卡说明</view>
				<view class="tips-content">
					<parse :content="userlevel.explain" />
				</view>
			</view>
		</block>

		<uni-popup id="dialogInput" ref="dialogInput" type="dialog">
			<uni-popup-dialog mode="input" title="卡号密码" value="" placeholder="请输入卡号密码" @confirm="getpwd" password="true"
				@close="pwdclose()"></uni-popup-dialog>
		</uni-popup>



		<uni-popup id="dialogMemberqr" ref="dialogMemberqr" type="dialog">
			<view class="hxqrbox">
				<image :src="member_qr" @tap="previewImage" :data-url="member_qr" class="img" />
				<view class="txt">会员码</view>
				<view class="close" @tap="closeMemberqr">
					<image src="/static/img/close2.png" style="width:100%;height:100%" />
				</view>
			</view>
		</uni-popup>

		<loading v-if="loading"></loading>
		<dp-tabbar :opt="opt"></dp-tabbar>
		<popmsg ref="popmsg"></popmsg>
	</view>
</template>

<script>
var app = getApp();
export default {
	data() {
		return {
			opt: {},
			loading: false,
			isload: false,
			menuindex: -1,

			pre_url: app.globalData.pre_url, static_url: app.globalData.static_url,
			userinfo: [],
			userlevel: [],
			sysset: [],
			cardno: '',
			cardpwd: '',
			cardinfo: { 'id': 0 },

			hasnext: 0,
			nextlevel: {},
			_initdata: {},
			vipimg: '',
			member_qr: ''
		};
	},
	onLoad: function (opt) {
		this.opt = app.getopts(opt);
		this.getdata();
	},
	onPullDownRefresh: function () {
		this.getdata();
	},
	methods: {
		getdata: function () {
			var that = this;
			that.loading = true;
			app.post('My/levelinfo', {
				id: that.opt.id,
				needinit: 1,
			}, function (res) {
				that.loading = false;
				if (res.userinfo) {
					that.userinfo = res.userinfo;
					that.userlevel = res.userlevel;
					that.cardinfo = res.cardinfo
					that.nextlevel = res.nextlevel
					that.hasnext = res.hasnext
					that.vipimg = res._initdata.membercardimg
					that.member_qr = res.member_qr
					that.show = true;
				}
				that.loaded();
			});
		},

		//兑换
		membership() {
			var that = this
			if (that.cardno == '') {
				app.error('请输入卡号'); return;
			}
			if (that.cardpwd == '') {
				that.$refs.dialogInput.open();
				return;
			}

			app.post('MemberLocalcard/receive', {
				cardno: that.cardno,
				cardpwd: that.cardpwd
			}, function (res) {
				that.cardpwd = '';
				that.$refs.dialogInput.close();
				if (res.status != 1) {
					app.error(res.msg); return;
				}
				app.success('领取成功');
				that.cardpwd = ''
				that.cardno = ''
				that.cardinfo = res.data
				setTimeout(function () {
					uni.navigateTo({
						url: "/pages/my/usercenter",
						fail(e) {
							console.log(e);
						}
					})
				}, 1000);

				//that.$router.go(0);
			});
		},
		getpwd: function (done, val) {
			this.cardpwd = val;
			this.membership();
		},
		pwdclose() {
			this.cardpwd = '';
		},
		showmemberqr: function (e) {
			this.hexiao_qr = e.currentTarget.dataset.hexiao_qr
			this.$refs.dialogMemberqr.open();
		},
		closeMemberqr: function () {
			this.$refs.dialogMemberqr.close();
		},
	}
};
</script>
<style>
page {
	background: #e8ebf2;
}

.topbg {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding-bottom: 30rpx
}

.topinfo {
	margin-top: 70rpx;
	width: 670rpx;
	height: 270rpx;
	padding: 60rpx 50rpx;
	display: flex;
	justify-content: center;
	position: relative
}

.topinfo .headimg {
	width: 120rpx;
	height: 120rpx;
	border-radius: 50%;
}

.topinfo .info {
	display: flex;
	flex: auto;
	flex-direction: column;
	padding-left: 20rpx;
	height: 120rpx;
}

.topinfo .info .nickname {
	font-size: 36rpx;
	font-weight: bold;
	color: #fff;
	margin-bottom: 10rpx
}

.topinfo .info .endtime {
	color: #fff;
	font-size: 24rpx;
	margin-top: 20rpx
}

.topinfo .set {
	position: absolute;
	top: 30rpx;
	right: 40rpx;
	width: 70rpx;
	height: 70rpx;
	line-height: 70rpx;
	font-size: 50rpx;
	text-align: center;
	color: #fff
}

.topbg .upbtn {
	margin-top: 10rpx;
	width: 660rpx;
	height: 110rpx;
	line-height: 90rpx;
	text-align: center;
	color: #fff;
	font-size: 32rpx;
}

.user-level {
	color: #b48b36;
	background-color: #ffefd4;
	margin-top: 4rpx;
	width: auto;
	height: 36rpx;
	border-radius: 18rpx;
	padding: 0 20rpx;
	display: flex;
	align-items: center
}

.user-level .level-img {
	width: 32rpx;
	height: 32rpx;
	margin-right: 6rpx;
	margin-left: -14rpx;
	border-radius: 50%
}

.user-level .level-name {
	font-size: 24rpx;
}

.explain {
	width: 100%;
	margin: 20rpx 0;
}

.explain .f1 {
	width: 100%;
	text-align: center;
	font-size: 30rpx;
	color: #333;
	font-weight: bold;
	height: 50rpx;
	line-height: 50rpx
}

.explain .f2 {
	padding: 20rpx;
	background-color: #fff
}

.contentbox-top {
	padding: 0rpx 40rpx;
	background: #fff;
	color: #fff;
	display: flex;
	flex-direction: column;
	height: 320rpx;
}

.member-info {
	display: flex;
	padding: 80rpx 0rpx 0rpx 20rpx;
}

.member-info .title {
	margin-left: 32rpx;
}

.member-avatar image {
	width: 120rpx;
	height: 120rpx;
	border-radius: 50%;
}

.tips {
	text-align: center;
	font-size: 24rpx;
	color: #999;
	margin-bottom: 60rpx;
}

.apply-title {
	color: #010101;
	font-size: 28rpx;
	font-weight: bold;
	text-align: center;
	margin: 20rpx 0rpx;
}

.member-quanyi {
	background-color: #333333;
	border-radius: 12rpx;
	margin: -80rpx 40rpx 20rpx 40rpx;
	padding: 40rpx;
	color: #fff;
}

.member-quanyi .mylevel-name {
	font-size: 36rpx;
	font-weight: bold;
}

.member-quanyi .levelup-info {
	margin: 14rpx 0rpx;
}

.member-quanyi .levelup-heng {
	height: 20rpx;
	background: #f4ce98;
	border-radius: 30rpx;
}

.member-quanyi .member-level-two {
	display: flex;
	justify-content: space-between;
	margin: 14rpx 0rpx;
}

.member_tip {
	color: #f4ce98;
	margin: 44rpx 0rpx 24rpx 0rpx;
	display: flex;
	align-items: center;
}

.member_tip .shuxian {
	background-color: #f4ce98;
	height: 36rpx;
	width: 12rpx;
	border-radius: 6rpx;
	margin-right: 12rpx;
}

.level-list {
	margin: 24rpx 0rpx;
}

.level-list .level-item {
	margin-bottom: 20rpx;
}

.level-list .level-item .level-name {
	font-size: 28rpx;
	font-weight: bold;
	display: flex;
	align-items: center;
}

.level-list .level-item .level-name image {
	width: 40rpx;
	height: 40rpx;
	margin-right: 12rpx;
}

.level-list .level-item .level-quanyilist .wxParse {
	color: #fff;
}

.level-list .level-item .level-quanyilist .wxParse .ul,
.wxParse .ol {
	margin: 16rpx 0rpx;
}

.level-list .level-item .level-quanyilist .wxParse .ul,
.wxParse .li {
	margin: 6rpx 0rpx;
}

.level-list .level-item .level-quanyilist {
	margin-left: 32rpx;
}

.level-btn {
	margin: 60rpx 0rpx 20rpx 0rpx;
}

.level-btn .upbtn {
	background: #f4ce98;
	text-align: center;
	padding: 10px;
	border-radius: 20rpx;
}

.buy-list {
	margin: 40rpx;
	background: #fff;
	border-radius: 24rpx;
	display: flex;
	justify-content: space-between;
	padding: 20rpx 40rpx 0rpx 40rpx;
	color: #eb544d;
}

.buy-list .buy-item {
	display: grid;
	margin: auto;
	text-align: center;

	line-height: 66rpx
}

.buy-list .buy-item image {
	width: 40rpx;
	height: 40rpx;
	text-align: center;
	margin: auto;
}

.membercard-tips {
	margin: 40rpx;
	background: #efdf9b;
	border-radius: 24rpx;
	padding: 20rpx 40rpx;
}

.membercard-tips .tips-title {
	text-align: center;
}

.search-keyword {
	display: flex;
	margin: 40rpx;
}

.search-input {
	height: 80rpx;
	line-height: 80rpx;
	width: 88%;
}

.search-input input {
	background-color: #fff;
	height: 80rpx;
	line-height: 80rpx;
	width: 100%;
	padding-left: 18rpx;
	border-radius: 6rpx 0rpx 0rpx 6rpx;
}

.search-btn {
	width: 12%;
	color: #fff;
	text-align: center;
	font-size: 28rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 0rpx 18rpx 18rpx 0rpx;
	background-color: #eb544d;
}

.membercard-vip {
	position: relative;
	margin: 0rpx 30rpx;
}

.membercard-vip .tips-title image {
	width: 100%;
	height: 400rpx;
}

.membercard-vip .tips-content {
	position: absolute;
	color: #fff;
	top: 300rpx;
	left: 34%;
}

.hxqrbox {
	background: #fff;
	padding: 50rpx;
	position: relative;
	border-radius: 20rpx
}

.hxqrbox .img {
	width: 400rpx;
	height: 400rpx
}

.hxqrbox .txt {
	color: #666;
	margin-top: 20rpx;
	font-size: 26rpx;
	text-align: center
}

.hxqrbox .close {
	width: 50rpx;
	height: 50rpx;
	position: absolute;
	bottom: -100rpx;
	left: 50%;
	margin-left: -25rpx;
	border: 1px solid rgba(255, 255, 255, 0.5);
	border-radius: 50%;
	padding: 8rpx
}
</style>